<div class="clearfix text-center col-xs-12">
  <a href="#" class="js-back-to-sidebar pull-left btn btn-xs btn-link"><i class="icon-caret-left"></i></a><span class="col-xs-10 navbar-btn"><strong><%- i18next.t("Change Background") %></strong></span>
</div>
<div class="col-xs-12 divider"></div>
<div class="col-xs-12 member-modal js-pre-scrollable vertical-scrollbar clearfix">
  <ul class="list-inline col-xs-offset-0">
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#34495e"><span class="background-box show well-lg" style="background-color:#34495e"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#23719f"><span class="background-box show well-lg" style="background-color:#23719f"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#5a966e"><span class="background-box show well-lg" style="background-color:#5a966e"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#bf4a40"><span class="background-box show well-lg" style="background-color:#bf4a40"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#5f778e"><span class="background-box show well-lg" style="background-color:#5f778e"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#0091ff"><span class="background-box show well-lg" style="background-color:#0091ff"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#46ba97"><span class="background-box show well-lg" style="background-color:#46ba97"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#f47564"><span class="background-box show well-lg" style="background-color:#f47564"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#819da2"><span class="background-box show well-lg" style="background-color:#819da2"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#47b7cd"><span class="background-box show well-lg" style="background-color:#47b7cd"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#95d9ad"><span class="background-box show well-lg" style="background-color:#95d9ad"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#f7b09c"><span class="background-box show well-lg" style="background-color:#f7b09c"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#b3bec1"><span class="background-box show well-lg" style="background-color:#b3bec1"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#bee5f3"><span class="background-box show well-lg" style="background-color:#bee5f3"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#caefd2"><span class="background-box show well-lg" style="background-color:#caefd2"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#f7d2c8"><span class="background-box show well-lg" style="background-color:#f7d2c8"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#444444"><span class="background-box show well-lg" style="background-color:#444444"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#4f4d7e"><span class="background-box show well-lg" style="background-color:#4f4d7e"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#2f663c"><span class="background-box show well-lg" style="background-color:#2f663c"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#a37e58"><span class="background-box show well-lg" style="background-color:#a37e58"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#6b6b6b"><span class="background-box show well-lg" style="background-color:#6b6b6b"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#7b5cb3"><span class="background-box show well-lg" style="background-color:#7b5cb3"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#65ab36"><span class="background-box show well-lg" style="background-color:#65ab36"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#bd6f32"><span class="background-box show well-lg" style="background-color:#bd6f32"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#999999"><span class="background-box show well-lg" style="background-color:#999999"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#baa1e6"><span class="background-box show well-lg" style="background-color:#baa1e6"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#9dbb1d"><span class="background-box show well-lg" style="background-color:#9dbb1d"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#ffce54"><span class="background-box show well-lg" style="background-color:#ffce54"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#d5d5d5"><span class="background-box show well-lg" style="background-color:#d5d5d5"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#dbcff1"><span class="background-box show well-lg" style="background-color:#dbcff1"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#ccdc87"><span class="background-box show well-lg" style="background-color:#ccdc87"></span></li>
    <li class="list-inline js-change-color board-background-select navbar-btn cur" data-color="#f1eabf"><span class="background-box show well-lg" style="background-color:#f1eabf"></span></li>
  </ul>
  <h4><%- i18next.t("Photos") %></h4>
  <% if (!_.isEmpty(board.attributes.background_picture_url) && board.attributes.background_picture_url != 'NULL') {
	   var background_picture_url = (board.attributes.background_picture_url).replace("_XXXX.jpg", "_s.jpg"); 
  %>
	  <ul class="list-inline col-xs-offset-0 clearfix">
		<li class="list-inline board-background-select navbar-btn cur col-xs-12">

		<ul class="list-inline clearfix">
		<li class="pull-left">
			<span class="background-box show well-lg" style="background-image:url(<%= background_picture_url %>); background-size:cover;"></span>
		</li>
		<li class="pull-left col-xs-8">
			<div class="clearfix">
				<p class="col-xs-5 nav htruncate">
				<% if (!_.isEmpty(board.attributes.background_name) && board.attributes.background_name != 'NULL') { %>
					<%= board.attributes.background_name %> 
				<% } %>
				</p>
				<div class="pull-right">
					<div class="btn-group btn-group-xs navbar-btn">
						<a class="btn btn-primary js-modal-fliker-trigger" title="<%- i18next.t('Change') %>" href="#" data-type="image" data-toggle="modal" data-target="#modalFlickrPhoto"><%- i18next.t("Change") %></a>
						<div class="dropdown btn btn-default">
							<a data-toggle="dropdown" class="dropdown-toggle" title="<%- i18next.t('Delete') %>" href="#">
								<i class="icon-remove cur js-delete-background-img"></i>
							</a>
							<ul class="dropdown-menu arrow arrow-right list-unstyled">
								<li id="js-attachment-confirm-respons-22" class="js-dropdown-popup">
								  <div>
									<div class="clearfix text-center col-xs-12"><span class="col-xs-10"><strong><%- i18next.t("Delete Attachment") %>?</strong></span><a href="#" class="js-span-close-popup pull-right"><i class="icon-remove"></i></a></div>
									<div class="col-xs-12 divider"></div>
									<div class="col-xs-12 text-left">
									  <p><%- i18next.t("Deleting an background photo. There is no undo.") %></p>
									  <a title="<%- i18next.t('Delete background photo') %>" class="btn btn-primary btn-large"><%- i18next.t("Delete") %></a></div>
								  </div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div>
				<small class="navbar-btn"><%- i18next.t("Powered by") %> <a href="javascript:void(0);" title="<%- i18next.t('Flickr') %>"><strong class="text-primary"><%- i18next.t("Flickr") %></strong></a></small>
			</div>		
		</li>
		</ul>	
		
		
		</li>
	  </ul>
  <% } else { %>
	 <a href="#" class="js-modal-fliker-trigger"  data-type="image" data-toggle="modal" data-target="#modalFlickrPhoto"><%- i18next.t("Choose...") %></a>
  <% } %>  

  <h4><%- i18next.t("Patterns and Textures") %></h4>
  <% if (!_.isEmpty(board.attributes.background_pattern_url) && board.attributes.background_pattern_url != 'NULL') { 
		var background_pattern_url = (board.attributes.background_pattern_url).replace("_XXXX.jpg", "_s.jpg"); 
  %>		
 <ul class="list-inline col-xs-offset-0 clearfix">
    <li class="list-inline board-background-select navbar-btn cur col-xs-12">
	
				<ul class="list-inline clearfix">
		<li class="pull-left">
			<span class="background-box show well-lg" style="background-image:url(<%= background_pattern_url %>); background-size:cover;"></span>
		</li>
		<li class="pull-left col-xs-8">
			<div class="clearfix">
				<p class="col-xs-5 nav htruncate"> <% if (!_.isEmpty(board.attributes.background_name) && board.attributes.background_name != 'NULL') { %>
					<%= board.attributes.background_name %> 
				<% } %> </p>
				<div class="pull-right">
					<div class="btn-group btn-group-xs navbar-btn">
						<a class="btn btn-primary js-modal-fliker-trigger" title="<%- i18next.t('Change') %>" href="#" data-type="texture" data-toggle="modal" data-target="#modalFlickrPhoto"><%- i18next.t("Change") %></a>
						<div class="dropdown btn btn-default">
							<a data-toggle="dropdown" class="dropdown-toggle" title="<%- i18next.t('Delete') %>" href="#">
								<i class="icon-remove cur js-delete-background-img"></i>
							</a>
							<ul class="dropdown-menu arrow arrow-right list-unstyled">
								<li id="js-attachment-confirm-respons-22" class="js-dropdown-popup">
								  <div>
									<div class="clearfix text-center col-xs-12"><span class="col-xs-10"><strong><%- i18next.t("Delete Attachment") %>?</strong></span><a href="#" class="js-span-close-popup pull-right"><i class="icon-remove"></i></a></div>
									<div class="col-xs-12 divider"></div>
									<div class="col-xs-12 text-left">
									  <p><%- i18next.t("Deleting an background photo. There is no undo.") %></p>
									  <a title="<%- i18next.t('Delete background photo') %>" class="btn btn-primary btn-large"><%- i18next.t("Delete") %></a></div>
								  </div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div>
				<small class="navbar-btn"><%- i18next.t("Powered by") %> <a href="javascript:void(0);" title="<%- i18next.t('Flickr') %>"><strong class="text-primary"><%- i18next.t("Flickr") %></strong></a></small>
			</div>		
		</li>
		</ul>
		
	</li>
  </ul>
  <% } else { %>
	 <a href="#" class="js-modal-fliker-trigger" data-type="texture" data-toggle="modal" data-target="#modalFlickrPhoto"><%- i18next.t("Choose...") %></a>
  <% } %>  
 
  
<% if(authuser.user.role_id == 1 || !_.isEmpty(board.acl_links.where({slug: "add_custom_background", board_user_role_id: parseInt(board.board_user_role_id)}))){ %> 
  <h4><%- i18next.t("Custom") %><span class="clearfix navbar-btn col-xs-7 pull-right"><span id="custom-dropzone-cssloader"></span></span></h4>
  <ul class="js-board-background-custom-lists list-inline">
    <% board.custom_attachments.each(function(custom_attachment) { %>
    <li class="js-change-custom-background board-background-select navbar-btn cur" data-background="<%= custom_attachment.get('path') %>"><span class="background-box show well-lg" style="background-image:url(<%= custom_attachment.get('path') %>"></span></li>
    <% }); %>
  </ul>


<div class="clearfix col-xs-12" id="custom-background-dropzone">
	<form id="js-board-custom-background-form" class="form-horizontal clearfix  js-cusotm-background-add" role="form" enctype="multipart/form-data">
		<div id="manager-area" class="js-cusotm-background-dropzone empty-block js-computer-open-board-background">
			<%- i18next.t("Drop files to upload") %>
		</div>
	</form>
</div>
<% } %>
<div class="col-xs-12 member-modal clearfix btn-block">
<h4><%- i18next.t("Productivity Beats") %></h4>
<% if (!_.isEmpty(board.attributes.music_content) && board.attributes.music_content != 'NULL') { %>
 <ul class="list-inline col-xs-offset-0 clearfix">
    <li class="clearfix col-xs-12">
	
	  <ul class="list-inline col-xs-offset-0">
		<li class="list-inline board-background-select navbar-btn cur col-xs-12">

		<ul class="list-inline clearfix">
		<li class="pull-left col-xs-12">
			<div class="clearfix">
				<p class="col-xs-7 nav htruncate">
				<%= board.attributes.music_name %>
				</p>
				<div class="pull-right">
					<div class="btn-group btn-group-xs navbar-btn">
						<a class="btn btn-primary js-modal-music-trigger" title="<%- i18next.t('Change') %>" href="#" data-toggle="modal" data-target="#modalMusic"><%- i18next.t("Change") %></a>
						<div class="dropdown btn btn-default">
							<a data-toggle="dropdown" class="dropdown-toggle" title="<%- i18next.t('Delete') %>" href="#">
								<i class="icon-remove cur js-music-clear"></i>
							</a>
							<ul class="dropdown-menu arrow arrow-right list-unstyled">
								<li id="js-attachment-confirm-respons-22" class="js-dropdown-popup">
								  <div>
									<div class="clearfix text-center col-xs-12"><span class="col-xs-10"><strong><%- i18next.t("Delete Attachment") %>?</strong></span><a href="#" class="js-span-close-popup pull-right"><i class="icon-remove"></i></a></div>
									<div class="col-xs-12 divider"></div>
									<div class="col-xs-12 text-left">
									  <p><%- i18next.t("Deleting an background photo. There is no undo.") %></p>
									  <a title="<%- i18next.t('Delete background photo') %>" class="btn btn-primary btn-large"><%- i18next.t("Delete") %></a></div>
								  </div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>	
		</li>
		</ul>	
	
	</li>
  </ul>
  <% } else { %>
	<a href="#" class="js-modal-music-trigger" data-toggle="modal" data-target="#modalMusic"><%- i18next.t("Add...") %></a>
  <% } %>  
</div>
</div>